<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/font/iconfont.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/style.css">
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/echarts.min.js"></script>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>
</head>
<style>
    html{background-color:#f9f9f9!important;}
    .table-hover{border-bottom:1px silver solid}
    site-demo-laydate{background-color:#fff;}
    .title{font-size:16px;padding-left:30px;padding:5px 25px;}
    .title span{border-left:2px solid #0b6fff;padding-left:15px;}
    .top_title{border:1px solid #d2d2d2;padding-bottom:8px;border-radius:6px;}
    .top_title .top_desc:nth-child(1) span{color:#24a5ff;}
    .top_title .top_desc:nth-child(2) span{color:#40c0cc;}
    .top_title .top_desc:nth-child(3) span{color:#ffa86e;}
    .top_title .top_desc:nth-child(4) span{color:#d258ff;}
    .top_title .top_desc:nth-child(5) span{color:#00e110;}
    .top_desc{width:19.5%}
    .top_desc1{width:8.333%;text-align: center}
    .zxd_top{margin-top:0px;margin-bottom:6px;}
    .zxd_top .top_desc span{font-size:18px;}
    .layui-laydate-footer{display: none!important;}


    .top_title .top_desc1:nth-child(1) span{color:#24a5ff;}
    .top_title .top_desc1:nth-child(2) span{color:#40c0cc;}
    .top_title .top_desc1:nth-child(3) span{color:#ffa86e;}
    .top_title .top_desc1:nth-child(4) span{color:#d258ff;}
    .top_title .top_desc1:nth-child(5) span{color:#00e110;}
</style>
<body>
<div class="page-wrapper">

    <section class="page-body ">

        <div class="row widget">
            <div class="row widget">
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-lightskyblue">
                            <i class="iconfont icon-zongshu"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-lightskyblue">{$total_ballots}</h1>
                            <p>总票数</p>
                            <!--                        <span class="status arrow-down">95.9%</span>-->
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-green">
                            <i class="iconfont icon-tianjiayonghudaodangqianwenjuan"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-green">{$newly_increased}</h1>
                            <p>新增票数</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-yellow">
                            <i class="iconfont icon-yishixiao"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-yellow">{$became_invalid}</h1>
                            <p>已失效</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-red">
                            <i class="iconfont icon-caozuodangqianmoshi"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-red">{$garden}
                            </h1>
                            <p>当前入园人数</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row widget">
            <div class="box table">
                <div class="box-header ui-sortable-handle" data-trigger="drag">
                    <h3 class="box-title">
                        票类统计
                    </h3>
                    <div class="box-tools pull-right">
                        <button class="" type="button" data-toggle="collapse">
                            <i class="iconfont icon-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body" id="table">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>
                                    门票类型
                                </th>
                                <th>
                                    总数
                                </th>
                                <th>
                                    今日新增
                                </th>
                                <th>
                                    有效票
                                </th>
                                <th>
                                    无效票
                                </th>
                            </tr>
                            </thead>
                            <tbody>

                            {volist name="tickets" id="vo"}
                            <tr>
                                <td>{$vo.title}</td>
                                <td>{$vo.total}</td>
                                <td>{$vo.increased}</td>
                                <td>{$vo.invalid}</td>
                                <td>{$vo.garden}</td>
                            </tr>
                            {/volist}

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row widget">
            <div class="box table">
                <div class="box-body" >
                    <div class="layui-inline layui-col-md2" id="test-n1"></div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" style="width:30%;float: left;margin-right:4%">
                            <thead>
                            <tr>
                                <th colspan="2" style="text-align: center">当日数据</th>
                            </tr>
                            </thead>
                            <tr>
                                <th>
                                    票种
                                </th>
                                <th>
                                    总数
                                </th>
                            </tr>

                            <tbody class="thatdayHtml">
                            {volist name="thatday" id="vo"}
                            <tr>
                                <td>{$vo.title}</td>
                                <td>{$vo.total}</td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>

                        <table class="table table-striped table-bordered table-hover" style="width:30%;float: left;margin-right:4%">
                            <thead>
                            <tr>
                                <th colspan="2" style="text-align: center">本周数据</th>
                            </tr>
                            </thead>
                            <tr>
                                <th>
                                    票种
                                </th>
                                <th>
                                    总数
                                </th>
                            </tr>
                            <tbody class="thatweekHtml">
                            {volist name="thatweek" id="vo"}
                            <tr>
                                <td>{$vo.title}</td>
                                <td>{$vo.total}</td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>
                        <table class="table table-striped table-bordered table-hover" style="width:30%;float: left">
                            <thead>
                            <tr>
                                <th colspan="2" style="text-align: center">本月数据</th>
                            </tr>
                            </thead>
                            <tr>
                                <th>
                                    票种
                                </th>
                                <th>
                                    总数
                                </th>
                            </tr>
                            <tbody class="thatmonthHtml">
                            {volist name="thatmonth" id="vo"}
                            <tr>
                                <td>{$vo.title}</td>
                                <td>{$vo.total}</td>
                            </tr>
                            {/volist}
                            </tbody>
                        </table>

                    </div>




                </div>



            </div>
        </div>

        <div class="row widget">
            <div class="box table">
                <div class="box-header ui-sortable-handle" data-trigger="drag">
                    <h3 class="box-title">
                        历史走势
                    </h3>
                    <div class="box-tools pull-right">
                        <button class="" type="button" data-toggle="collapse">
                            <i class="iconfont icon-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body" >
                    <div class="table-responsive" id="tendency" style="height:400px;" >

                    </div>
                </div>
            </div>
        </div>



    </section>




</div>



<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //直接嵌套显示
        laydate.render({
            elem: '#test-n1'
            , position: 'static',
            done:function (value) {
                $.ajax({
                    url: "{:URL('index/index/webClick')}",
                    type: 'POST',
                    data: {data: value},
                    dataType: 'json',
                    success: function (res) {
                        $(".thatdayHtml").html(res.thatdayHtml);
                        $(".thatweekHtml").html(res.thatweekHtml);
                        $(".thatmonthHtml").html(res.thatmonthHtml);
                    }
                });
            }
        });

    });

    var tendency = echarts.init(document.getElementById('tendency'));
    tendency.setOption({
        title: {
            subtext: "新增分析"
        },
        tooltip: {
            trigger: "axis"
        },
        legend: {
            data: ["总共耗时"]
        },
        grid: {
            left: '5%',
            right: '3%'
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: "none"
                },
                dataView: {
                    readOnly: false
                },
                magicType: {
                    type: ["line", "bar"]
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: "2019-05-24"
        },
            {
                type: "inside"
            }
        ],
        xAxis: {
            type: "category",
            boundaryGap: false,
            data:{$xAxisdata}
        },
        yAxis: {
            type: "value",
            axisLabel: {
                formatter: "{value}张"
            }
        },
        series: [{
            name: "新增总数",
            type: "line",
            data: {$seriesdata},
            markPoint: {
                data: [{
                    type: "max",
                    name: "最大值"
                },
                    {
                        type: "min",
                        name: "最小值"
                    }
                ]
            },
            itemStyle: {
                color: "#5bd1db"
            },
            lineStyle: {
                width: 3
            },
            // markLine: {
            //     label: {
            //         show: true,
            //         position: "middle",
            //         formatter: "{b}: {c} 次"
            //     },
            //     symbol: 'none',
            //     data: [{
            //         type: "average",
            //         name: "平均值"
            //     },
            //
            //     ]
            // }
        }]
    });
    // $(function () {
    //     setInterval(function(){
    //         var hours = new Date().getHours();
    //         var minutes = new Date().getMinutes();
    //         var seconds = new Date().getSeconds();
    //         if(hours<10){
    //             hours = '0'+hours;
    //         }
    //         if(minutes<10){
    //             minutes = '0'+minutes;
    //         }
    //         if(seconds<10){
    //             seconds = '0'+seconds;
    //         }
    //         $('.shijian').text(hours+":"+minutes+":"+seconds);
    //     },1000)
    // })
</script>


</body>
</html>